<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{ROOT}}/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/lhh_lib.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/zh_tab.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap-datetimepicker.css" />
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="{{ROOT}}/js/html5shiv.js"></script>
    <![endif]-->

</head>
<body class="content">
<div class="row _lhh_breadcrumb MB10 visible-lg">
    <ul class="breadcrumb pull-left">
        <li><a href="index.html">首页</a></li>
        <li class="active">逆变器能量分布图</li>
    </ul>
    <div class="p-rel">
        <div class="_lhh_breadcrumb-more MR15">
            <!--电子时钟 begin-->
            <include file="{{ROOT}}/controllers/include/clock.html" dataType="html"></include>
            <!--电子时钟 end-->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-mod-12">
        <div class="page-header">
            <div class="ML10 MT10">
                <label class="MR5">逆变器</label>
                <select type="select" class="form-control">
                    <option>［01＃方阵］无锡上能逆变器01</option>
                </select>
                <label class="MR5 ML30">统计方式</label>
                <select type="select" id="dateSelect" class="form-control">
                    <option dateType="2">按月统计</option>
                    <option dateType="3">按日统计</option>
                </select>
                <label class="MR5 ML30">指标</label>
                <select type="select" class="form-control">
                    <option>交流功率</option>
                    <option>直流功率</option>
                </select>
                <label class="MR5 ML30">日期</label>
                <input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime form-control">
                <button type="submit" class="btn page-header-btn ML30">查询</button>
            </div>
        </div>
    </div>
</div>
<div class="row MB30">
    <div class="col-md-12 MT20">
        <div class="echarts" style="height: 400px;width:100%;" id="echarts-column-chart"></div>
    </div>
</div>
</body>
</html>


<script type="text/javascript" src="{{ROOT}}/js/highstock.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/datetimepicker-custom.js"></script>


<script type="text/javascript">
    LAMJS.main(function(){
        'use strict';
        var System=this;

        function highstock(){
            var seriesOptions = [],
                    seriesCounter = 0,
                    names = ['MSFT', 'AAPL'];
            $.each(names, function (i, name) {
                $('#echarts-column-chart').highcharts({
                    chart: {
                        height: 620,
                        zoomType: 'xy',
                        plotBackgroundColor:'#eef4ff'     //绘图区背景色
                    },
                    title: {
                        text: '2015年09月01日 逆变器能量分布(共2台)',
                        x:40,
                        style:{
                            fontFamily:'SimHei'
                        }
                    },
                    xAxis: {
                        categories: ['05:45','06:00','06:15','06:30','06:45','07:00','07:15', '07:30','07:45','08:00','08:15','08:30','08:45','09:00','09:15','09:30', '09:45','10:00','10:15','10:30','10:45','11:00','11:15','11:30','11:45','12:00','12:15','12:30','12:45','13:00','13:15','13:30','13:45','14:00','14:15','14:30','14:45','15:00','15:15','15:30','15:45','16:00','16:15','16:30','16:45','17:00','17:15','17:30','17:45','18:00','18:15','18:30','18:45','19:00','19:15','19:30','19:45','20:00','20:15','20:30','20:45','21:00','21:15'],
                        title:{
                            text:'时间',
                            y : -20,
                            x : -10
                        },
                        labels: {
                            rotation : -90,//旋转-90度
                            y : 50,
                            align: 'left'
                        },
                        gridLineWidth:1
                    },
                    plotOptions: {
                        series: {
                            marker: {
                                enabled: false, /*数据点是否显示*/
                                radius: 0,      /*数据点大小*/
                            }
                        }
                    },
                    yAxis: [{
                        title: {
                            text: '功率(kw)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    }],
                    credits: {
                        enabled:false    //不显示版权标签
                    },
                    legend: {
                        enabled:false    //不显示图例
                    },
                    series: [{
                        name: '[01＃方阵]无锡上能逆变器01',
                        data: [20, 24,25,24,28,30,100,125,150,180,190,195,200,212,214,215,227.0,227.5,227.8,228.0,210.0,210.2,210.3,229,223.5,223.6,223.9,334.0,334.4,334.5,334.8,355.0,359,325,336,348,327,347,338,328.0,225,229,339,410,411,415,426,436,428,418,427,427,410,412,414,415,327,227,227,118,121,110]
                    }, {
                        name: '直流功率',
                        data: [10, 20,22,24,28,30,100,125,150,180,190,195,212,210.3,229.0,223.5,223.6,223.9,334.0,334.4,334.5,334.8,355,359,325,336,348,320,436,200,212,214,215,227.0,227.5,227.8,228.0,210.0,428,418.0,427.2,427.5,410,412,110.2,347.5,337.8,328.0,225.5,229.0,339,410,411,415,426.5,414,415,323,225,208,118,120]
                    }]


                });

            });

        }


        $(window).resize(function() {
            highstock();
        }).trigger('resize');


        /**
         *
         * @param (String)date  NOT NULL
         * @param (Object)D     NOT NULL
         * example:
         *          dateChange("2012-06",{format: type,minView:2})
         */
        function dateChange(date,D){
            $('.form_datetime').val(date)
                    .datetimepicker(D);

        }

        function initDate(){
            $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

            var $dateInput = $('.form_datetime');
            var date,type;
            $('#dateSelect').change(function(){
                var type=$(this).children('option:selected').attr('dateType');
                //type :1 年 ，2 月，3 日
                switch(type){
                    case '1':
                        break;
                    case '2':
                        date="2012-06";
                        type="yyyy-mm";
                        dateChange(date,{format: type,minView:2});
                        $dateInput.val(date);
                        break;
                    case '3':
                        date="2012-06-01";
                        type="yyyy-mm-dd";
                        dateChange(date,{format: type,minView:2});
                        $dateInput.val(date);
                        break;

                    default :
                }
            });
        }
        $(function(){

            initDate();
        });



    });
</script>




